<%--
    Document   : modificarNovedad
    Created on : 29/01/2011, 11:36:35 PM
    Author     : Hector Gutierrez
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="FuncionesUtilitarias.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<% String id_gen = (String) request.getParameter("id_gen");%>
<% String id_esp = (String) request.getParameter("id_esp");%>

<h1 class="title">Gestión de Tipos de Novedad</h1>
<hr>
<p class="meta"></p>    
<center>
    <h2>Modificar Tipo de Novedad</h2>
    <div id="center">
        <html:form action="/modificarNovedad" styleId="modificarNovedadForm" onsubmit="return sendForm('modificarNovedadForm', 'modificarNovedad','center');">
            <!-- Subtitulo -->
            <br>
            <h2 id="sub2" style="display: none">Datos Básicos:</h2>
            <h2 id="sub3" style="display: none">Agregar Campos:</h2>
            <br>
            <h3 id="h31" style="display: none">Novedad Genérica:</h3>
            <h3 id="h32" style="display: none">Novedad Específica:</h3>

            <input type="text" name="id_gen" property="id_gen" id="id_gen" style="display:none" />
            <input type="text" name="id_esp" property="id_esp" id="id_esp" style="display:none" />

            <table id="selectTipoNovedadTable" style="display: none" >
                <input type="text" name="tipo_novedad" id="tipo_novedad" style="display:none">
            </table>

            <font color="red" id="error_select" style="display: none"><p>Debe seleccionar un Tipo de Novedad Genérica.</p></font>
            <font color="red" id="error_nombre" style="display: none"><p>Debe ingresar un nombre para la novedad.</p></font>
            <font color="red" id="existe_nombre" style="display: none"><p>El nombre de la novedad ingresado ya existe.</p></font>
            <font color="red" id="nombre_alfanum" style="display: none"><p>El nombre sólo puede contener letras y/o números y no puede empezar con espacios.</p></font>
            <table id="setNovedadesNamesTable" style="display: none">
                <!-- Definición de nombres de la novedad a agregar -->
                <tr id="setNovGenName">
                    <td><h4><font color="red">*&nbsp;</font>Nombre:</h4></td>
                    <td><html:text property="nombre_gen" styleId="nombre_gen" disabled="true" size="40"/></td>
                </tr>
                <tr id="setNovGenDes">
                    <td><h4>Descripción:</h4></td>
                    <td><html:textarea property="descr_gen" styleId="descr_gen" rows="15" cols="40"/></td>
                </tr>
                <tr id="selectNovGen">
                    <td id="label1"><h4><font color="red">*&nbsp;</font>Tipo de Novedad Genérica:</h4></td>
                    <td id="dropdown"><select id="novGenSelected" name ="novGenSel" disabled="true" onchange="">
                        </select>
                    </td>
                </tr>
                <tr id="setNovEspName">
                    <td><h4><font color="red">*&nbsp;</font>Nombre:</h4></td>
                    <td><html:text property="nombre_esp" styleId="nombre_esp" disabled="true" size="40"/></td>
                </tr>
                <tr id="setNovEspDes">
                    <td><h4>Descripción:</h4></td>
                    <td><html:textarea property="descr_esp" styleId="descr_esp" rows="15" cols="40"/></td>
                </tr>
                <br>
            </table>
            <h3 id="sub4" style="display: none">Campos Existentes:</h3>
            <br>
            <!-- Agrega los campos a las planillas -->
            <table cellpadding="0" cellspacing="0" border="0" id ="tabla_campos_viejos" style="display: none" class="sortable">
                <thead>
                    <tr>
                        <th class="nosort">Nombre</th>
                        <th>Tipo</th>
                        <th>Longitud</th>
                        <th>Obligatorio</th>
                    </tr>
                </thead>
            </table>
            <br>
            <h3 id="sub5" style="display: none">Campos Adicionales:</h3>
            <div style="overflow:auto">
                <table cellpadding="0" cellspacing="0" border="0" id="camposTable" style="display: none" class="sortable">
                    <br>
                    <thead>
                        <tr>
                            <th class="nosort">Nombre</th>
                            <th>Tipo</th>
                            <th>Longitud</th>
                            <th>Obligatorio</th>
                            <th>Agregar/Quitar<br>Campo</th>
                        </tr>
                    </thead>
                    <tbody id="tabla_campos">
                    </tbody>
                </table>
            </div>
            <font color="red" id="error_campos" style="display: none"><p>El nombre de los campos sólo puede contener letras y/o números y no puede empezar con espacios.</p></font>
            <font color="red" id="error_campos_vacios" style="display: none"><p>El nombre del campo no puede ser vacio.</p></font>
            <font color="red" id="error_longitud" style="display: none"><p>El valor de la longitud de los campos debe ser un número mayor a cero (0).</p></font>
            <h3 id="subAlertas" style="display: none">Información de Alertas:</h3>
            <table id="alertaTable" style="display: none">
                <tr>
                    <td><h4>Intervalo de ocurrencia en días:</h4></td>
                    <td><font color="red">*&nbsp;</font><html:text property="intervalo_ocurrencias" styleId="intervalo_ocurrencias" size="5" maxlength="5" /></td>
                </tr>
                <tr>
                    <td><h4>Ocurrencias necesarias para activar la alerta:</h4></td>
                    <td><font color="red">*&nbsp;</font><html:text property="numero_ocurrencias" styleId="numero_ocurrencias" size="5" maxlength="5"/></td>
                </tr>
            </table>
            <br>
            <font color="red" id="error_alerta_intervalo" style="display: none"><p>El valor del intervalo de ocurrencias debe ser un número.</p></font>
            <font color="red" id="error_alerta_ocurrencias" style="display: none"><p>El valor las ocurrencias necesarias debe ser un número.</p></font>
            <table>
                <font color="red" id="obligatorios" style="display: none"><p>Los campos que tienen (*) son obligatorios.</p></font>
                <!-- Parte baja de la página -->
                <tr>
                    <td>
                        <input type="button" name="nextButton" id="nextButton" value="Continuar" />
                    </td>
                    <td>
                        <input type="button" name="addNovedad" id="addNovedad" value="Agregar Novedad"  style="display: none" onclick="validarCamposAlertas();"/>
                    </td>
                    <td>
                        <input type="button" name="backButton" id="backButton" value="Atrás" onclick="novedadesPlanilla();"/> 
                    </td>
                </tr>
            </table>
        </html:form>
    </div>
</center>
<script>
    document.getElementById('id_gen').value = <% out.print(id_gen);%>;
    document.getElementById('id_esp').value = <% out.print(id_esp);%>;
</script>
<script type="text/javascript">
    /*
     * Según el tipo de novedad escogido (genérica o específica)
     * se muestran los campos correspondientes.
     */
    id_gen = "";
    id_esp = "";

    $(function(){
        inicializar_novedad(<% out.print(id_gen);%>,<% out.print(id_esp);%>);
        consultarNovedad(<% out.print(id_gen);%>,<% out.print(id_esp);%>);
    });
    
    function inicializar_novedad(id_generica, id_especifica){
        id_gen=id_generica;
        id_esp=id_especifica;
        if(id_gen != "" && id_esp == "-1"){
            document.getElementById('tipo_novedad').value = "generica";
            muestraCamposNombres("generica");
        }else if(id_gen != "" && id_esp != ""){
            document.getElementById('tipo_novedad').value = "especifica";
            muestraCamposNombres("especifica");
        }
    }

    function consultarNovedad(id_gen,id_esp){
        $.ajax({
            type: "GET",
            url: 'consultarNovedad.do',
            data: {id_gen:id_gen,id_esp:id_esp},
            dataType: 'json',
            success: processConsultarNovedad
        });
        return false
    }

    function processConsultarNovedad(data){
        if(data.novedad){
            if (id_esp == "-1"){
                $('#nombre_gen').val(data.novedad.nombre_novedad_gen);
                $('#descr_gen').val(data.novedad.descripcion);
                $('#intervalo_ocurrencias').val(data.novedad.intervalo_alerta);
                $("#numero_ocurrencias").val(data.novedad.ocurrencias);
            }else{
                $('#nombre_esp').val(data.novedad.nombre_novedad_esp);
                $('#descr_esp').val(data.novedad.descripcion);
                $('#intervalo_ocurrencias').val(data.novedad.intervalo_alerta);
                $("#numero_ocurrencias").val(data.novedad.ocurrencias);
                $("#novGenSelected").val(data.novedad.nombre_novedad_gen);                                            
                var string = "<option value='"+id_gen+"'>"+data.novedad.nombre_novedad_gen+"</option>";
                $('#novGenSelected').append(string)
            }
        } else {
            alert("Ha ocurrido un error. La novedad no puede ser modificada.");
        }
        return false;
    }
    
    /////////////////

    function muestraCamposNombres(tipo){
        showElementByDisplay('sub2');
        hideElementByDisplay('sub3');
        hideElementByDisplay('sub4');
        hideElementByDisplay('sub5');
        hideElementByDisplay('tabla_campos_viejos');
        hideElementByDisplay('camposTable');
        hideElementByDisplay('subAlertas');
        hideElementByDisplay('alertaTable');
        showElementByDisplay('nextButton');
        hideElementByDisplay('addNovedad');
        if(tipo == 'generica'){
            showElementByDisplay('setNovedadesNamesTable');
            showElementByDisplay('h31');
            hideElementByDisplay('h32');
            hideElementByDisplay('selectNovGen');
            hideElementByDisplay('setNovEspName');
            hideElementByDisplay('setNovEspDes');
            showElementByDisplay('setNovGenName');
            showElementByDisplay('setNovGenDes');
            document.getElementById('nextButton').onclick = Function("showAddCampos('gen','"+id_gen+"')");
        }else{
            showElementByDisplay('setNovedadesNamesTable');
            showElementByDisplay('h32');
            hideElementByDisplay('h31');
            showElementByDisplay('selectNovGen');
            showElementByDisplay('setNovEspName');
            showElementByDisplay('setNovEspDes');
            hideElementByDisplay('setNovGenName');
            hideElementByDisplay('setNovGenDes');
            document.getElementById('nextButton').onclick = Function("showAddCampos('esp','"+id_gen+"')");
        }
        hideElementByDisplay('selectTipoNovedadTable');
        showElementByDisplay('sub2');
        document.getElementById('backButton').onclick = Function("agregarNovedad()");
        showElementByDisplay('obligatorios');
    }

    /*
     * Muestra la sección de agregar campos a la planilla.
     */
    function showAddCampos(tipo,id_generica){
    
        hideElementByDisplay('sub2');
        showElementByDisplay('sub3');
        showElementByDisplay('sub4');
        showElementByDisplay('sub5');
        hideElementByDisplay('h31');
        hideElementByDisplay('h32');
        hideElementByDisplay('error_select');
        hideElementByDisplay('error_nombre');
        hideElementByDisplay('existe_nombre');
        hideElementByDisplay('setNovedadesNamesTable');
        showElementByDisplay('tabla_campos_viejos');
        showElementByDisplay('camposTable');
        showElementByDisplay('subAlertas');
        showElementByDisplay('alertaTable');
        hideElementByDisplay('nextButton');
        showElementByDisplay('addNovedad');
        hideElementByDisplay('error_campos');
        if(tipo == 'gen'){
            document.getElementById('backButton').onclick = Function("muestraCamposNombres('generica')");
            cargarCampos("gen");
        }else{
            $("#tabla_campos_viejos").empty();
            campos_existentes(id_generica);
            cargarCampos("esp");
            document.getElementById('backButton').onclick = Function("muestraCamposNombres('especifica')");
        }
        
    }
    
    var counter = 1;
    function cargarCampos(tipo){
        if (tipo == "gen"){
            $.getJSON("muestraCampos.do",{gen: id_gen, esp: "-1"},
            function(data) {
                var row ="";
                $.each(data.fields, function(i,item){
                    row = "<tr id='tr"+counter+"'><td><font color='red'>*&nbsp;</font><input type='text' id='c"+counter+"' name='campos[]' size='35'/></td>"+
                        "<td><select id='tipo"+counter+"' name='tipos[]'>";
                    var nombre_campo = "c"+counter;
                    var longitud_campo = "l"+counter;         
                    if(item.validacion_campo == 0){
                        row +="<option value='2'>Fecha</option><option value='0' selected>Numérico</option>"+
                            "<option value='1'>Texto</option>";
                    }else if(item.validacion_campo == 1){
                        row +="<option value='2'>Fecha</option><option value='0'>Numérico</option>"+
                            "<option value='1' selected>Texto</option>";
                    }else {
                        row +="<option value='2' selected>Fecha</option><option value='0'>Numérico</option>"+
                            "<option value='1'>Texto</option>";
                    }  
                    row +="</select></td><td><input type='text' id='l"+counter+"' name='longitud[]' size='10' maxlength='5' /></td>";
                    row +="<td><input type='checkbox' id='ob"+counter+"' name='obligatorio"+counter+"'>"
                    row +="<input type='text' id='obligatorio_val_"+counter+"' style='display:none' name='obligatorio[]' value='false'></td></td>"
                    if(counter == 1){
                        row +="<td id='td1'><input type='button' name='addFieldButton' id='addFieldButton' value='+' onclick='nuevoCampo();'/></td></tr>"
                    }else{
                        row +="<td id='td"+counter+"'><input type='button' name='addFieldButton' id='addFieldButton"+counter+"' value='+' onclick='nuevoCampo();'/>"+
                            "<input type='button' name='removeFieldButton' id='removeFieldButton"+counter+"' value='-' onclick='removerCampo("+counter+");'/></td></tr>";
                    }
                    $("#tabla_campos").append(row);    
                    if(item.obligatorio_campo == true){
                        document.getElementById('ob'+counter).checked = true;
                    }
                    document.getElementById(nombre_campo).value = item.nombre_campo;
                    document.getElementById(longitud_campo).value = item.longitud;
                    counter++;
                });
            });
        }
        else{
            $.getJSON("muestraCamposEspecifica.do",{gen: id_gen, esp: id_esp},
            function(data) {
                var row ="";
                $.each(data.fields, function(i,item){
                
                    row = "<tr id='tr"+counter+"'><td><font color='red'>*&nbsp;</font><input type='text' id='c"+counter+"' name='campos[]' size='35'/></td>"+
                        "<td><select id='tipo"+counter+"' name='tipos[]'>";
                    var nombre_campo = "c"+counter;
                    var longitud_campo = "l"+counter;         
                    if(item.validacion_campo == 0){
                        row +="<option value='2'>Fecha</option><option value='0' selected>Numérico</option>"+
                            "<option value='1'>Texto</option>";
                    }else if(item.validacion_campo == 1){
                        row +="<option value='2'>Fecha</option><option value='0'>Numérico</option>"+
                            "<option value='1' selected>Texto</option>";
                    }else {
                        row +="<option value='2' selected>Fecha</option><option value='0'>Numérico</option>"+
                            "<option value='1'>Texto</option>";
                    }  
                    row +="</select></td><td><input type='text' id='l"+counter+"' name='longitud[]' size='10' maxlength='5' /></td>";
                    row +="<td><input type='checkbox' id='ob"+counter+"' name='obligatorio"+counter+"'>";                   
                    row +="<input type='text' id='obligatorio_val_"+counter+"' style='display:none' name='obligatorio[]' value='false'></td></td>"
                    if(counter == 1){
                        row +="<td id='td1'><input type='button' name='addFieldButton' id='addFieldButton' value='+' onclick='nuevoCampo();'/></td></tr>"
                    }else{
                        row +="<td id='td"+counter+"'><input type='button' name='addFieldButton' id='addFieldButton"+counter+"' value='+' onclick='nuevoCampo();'/>"+
                            "<input type='button' name='removeFieldButton' id='removeFieldButton"+counter+"' value='-' onclick='removerCampo("+counter+");'/></td></tr>";
                    }
                    $("#tabla_campos").append(row);    
                    document.getElementById(nombre_campo).value = item.nombre_campo;
                    document.getElementById(longitud_campo).value = item.longitud;
                    if(item.obligatorio_campo == true){
                        document.getElementById('ob'+counter).checked = true;
                    }
                    counter++;
                });
            });
        }
        
    }
    
    var numero_campo = 1;
    function campos_existentes(id_gen){
        $.getJSON("muestraCampos.do",{gen: id_gen, esp: "-1"},
        function(data) {
            var row ="<thead><tr><th class='nosort'>Nombre</th><th>Tipo</th><th>Longitud</th><th>Obligatorio</th></tr></thead>";
            $("#tabla_campos_viejos").append(row);
            row = "<tbody>";
            $("#tabla_campos_viejos").append(row);
            $.each(data.fields, function(i,item){
                row = "<tr><td>"+item.nombre_campo+"</td>";
                if(item.validacion_campo == 0){
                    row += "<td>Numérico</td>";
                }else if(item.validacion_campo == 1){
                    row += "<td>Texto</td>";
                }else {
                    row += "<td>Fecha</td>";    
                }
                row += "<td>"+item.longitud+"</td>";
                if(item.obligatorio_campo == true){
                    row += "<td><input type='checkbox' id='obl"+numero_campo+"' name='obligatorios"+numero_campo+"' checked disabled='true' ></td></tr>";
                }
                else{
                    row += "<td><input type='checkbox' id='obl"+numero_campo+"' name='obligatorios"+numero_campo+"' disabled='true' ></td></tr>";
                }
                $("#tabla_campos_viejos").append(row);
                numero_campo++;
            });
            row = "</tbody>";
            $("#tabla_campos_viejos").append(row);
        });
    }

    /*
     * Agrega un nuevo campo a la planilla a crear.
     */
   
    function nuevoCampo(){
        //counter++;
        var row = "<tr id='tr"+counter+"'><td><font color='red'>*&nbsp;</font><input type='text' id='c"+counter+"' name='campos[]' size='35'/></td>"+
            "<td><select id='tipo"+counter+"' name='tipos[]'><option value='2'>Fecha</option><option value='0'>Numérico</option><option value='1'>Texto</option></select></td>"+
            "<td><input type='text' id='l"+counter+"' name='longitud[]' size='10' maxlength='5' /></td>"+
            "<td><input type='checkbox' id='ob"+counter+"' name='obligatorio"+counter+"' >"+
            "<input type='text' id='obligatorio_val_"+counter+"' style='display:none' name='obligatorio[]' value='false'></td>"+        
            "<td id='td"+counter+"'><input type='button' name='addFieldButton' id='addFieldButton"+counter+"' value='+' onclick='nuevoCampo();'/>"+
            "<input type='button' name='removeFieldButton' id='removeFieldButton"+counter+"' value='-' onclick='removerCampo("+counter+");'/></td></tr>";
        $("#camposTable").append(row);
    }
    
    function removerCampo(id){
        if(id>1){
            var tr = "#tr"+id;
            $(tr).remove();   
        }
    }

    function validarCamposAlertas(){
        hideElementByDisplay('error_campos');
        hideElementByDisplay('error_campos_vacios');
        hideElementByDisplay('error_longitud');
        hideElementByDisplay('error_alerta_intervalo');
        hideElementByDisplay('error_alerta_ocurrencias');        
        var hayError = false;
        for(var i = 1; i < counter; i++){
            if (document.getElementById('tr'+i) != null){
                var field = document.getElementById('c'+i).value;
                if(field.length > 0 && !(validarAlfaNum('c'+i))){
                    showElementByDisplay('error_campos');
                    hayError = true;
                }
                if(field == ""){
                    showElementByDisplay('error_campos_vacios');
                    hayError = true;
                }
                if(validarNumeros('l'+i)){
                    if(document.getElementById('l'+i).value == "0"){
                        showElementByDisplay('error_longitud');    
                        hayError = true;
                    }
                }else{
                    showElementByDisplay('error_longitud');    
                    hayError = true;
                }

                if(document.getElementById('ob'+i).checked){
                    document.getElementById('obligatorio_val_'+i).value = true;
                }
            }
        }
            
        
        var alerta = document.getElementById('intervalo_ocurrencias').value;
        if(alerta.length > 0 && !(validarNumerosPositivosAlerta('intervalo_ocurrencias')) || alerta == ""){
            showElementByDisplay('error_alerta_intervalo');
            hayError = true;
        }
        alerta = document.getElementById('numero_ocurrencias').value
        if((alerta.length > 0 && !(validarNumerosPositivosAlerta('numero_ocurrencias')))|| alerta == ""){
            showElementByDisplay('error_alerta_ocurrencias');
            hayError = true;
        }
        if(!hayError){
            sendForm('modificarNovedadForm', 'modificarNovedad','center');
        }
    }
    
</script>